<template>
  <div
    :class="['pui-drawer', 'pui-drawer__' + position, componentRef.show && 'show']"
    :style="componentRef.show ? `width:${width}px;height: ${height}px;z-index: ${zIndex};` : `z-index: ${zIndex};`"
  >
    <div class="pui-drawer_container">
      <div class="pui-drawer_toolbar">
        <pui-icon :name="'double-arrow-' + iconName" @click="toggleOpen"></pui-icon>
        <span class="pui-drawer_toolbar__title" v-if="!header && (componentRef.show || position === 'top' || position === 'bottom')">{{
          title
        }}</span>
        <slot name="header" v-else-if="header && (componentRef.show || position === 'top' || position === 'bottom')" />
      </div>
      <Transition name="fade">
        <div class="pui-drawer_content outer" v-show="componentRef.show">
          <div class="inner">
            <slot></slot>
          </div>
        </div>
      </Transition>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  name: 'pui-drawer',
});
</script>

<script setup lang="ts">
import { reactive, computed } from 'vue';
import type { Props } from './interface';

const props = withDefaults(defineProps<Props>(), {
  position: 'left',
  title: 'Drawer',
  width: '',
  height: '',
  zIndex: 1,
  header: false,
  show: false,
});

const componentRef = reactive({
  show: props.show,
});

const iconName = computed(() => {
  switch (props.position) {
    case 'left':
      return componentRef.show ? 'left' : 'right';
    case 'right':
      return componentRef.show ? 'right' : 'left';
    case 'top':
      return componentRef.show ? 'up' : 'down';
    case 'bottom':
      return componentRef.show ? 'down' : 'up';
  }
});

const toggleOpen = () => {
  componentRef.show = !componentRef.show;
};
</script>
